﻿@using Digital.WCFClient.ConfigService
@using System.Collections.ObjectModel
@using Digital.Common.Mvc.Extensions
@using Microsoft.AspNet.Identity
@model Digital.WCFClient.ConfigService.CasesModel
@{
    ViewBag.Title = "添加案例";
    Layout = "~/Views/Shared/_LayoutDigital.cshtml";
}
@section PageSpecificJavascriptIncludes{
    <link rel="stylesheet" href="../DigitalStyle/css/jquery.gritter.css" />
    <link rel="stylesheet" href="../DigitalStyle/css/bootstrap-fileupload.min.css" />
    <link rel="stylesheet" href="../DigitalStyle/css/jquery.tagsinput.css" />

    <script src="../DigitalStyle/js/jquery.autogrow-textarea.js"></script>
    <script src="../DigitalStyle/js/bootstrap-fileupload.min.js"></script>
    <script src="../DigitalStyle/js/jquery.maskedinput.min.js"></script>
    <script src="../DigitalStyle/js/jquery.tagsinput.min.js"></script>

    <script src="../DigitalStyle/js/jquery.gritter.min.js"></script>
    <script src="../DigitalStyle/js/jquery.validate.js"></script>
    <script src="../DigitalStyle/js/JqueryToken.js"></script>
    <script src="../DigitalStyle/js/messages_cn.js"></script>
    <!-- CKEditor -->
    <script src="../DigitalStyle/js/ckeditor/ckeditor.js"></script>
    <script src="../DigitalStyle/js/ckeditor/adapters/jquery.js"></script>
    <script type="text/javascript" src="@Url.StaticFile("/DigitalStyle/js/flashupload.js")"></script>
    <script src="../DigitalStyle/js/formvalidator.js"></script>

}
<div class="pageheader">
    <h2><i class="fa fa-user"></i> 添加案例 <span>案例中心</span></h2>
    <div class="breadcrumb-wrapper">
        <span class="label">你的位置:</span>
        <ol class="breadcrumb">
            <li><a href="">企业中心</a></li>
            <li class="active">案例中心</li>
        </ol>
    </div>
</div>

<div class="contentpanel">
    <div class="row">

        <div class="col-sm-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-btns">
                        <a href="" class="minimize">&minus;</a>
                    </div><!-- panel-btns -->
                    <h3 class="panel-title">案例管理</h3>
                </div>


                <div class="panel-body panel-body-nopadding">
                    <form class="form-horizontal form-bordered" id="firstForm" onsubmit="return false;">
                        @Html.AntiForgeryToken()
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="asterisk">*</span> 案例名称</label>
                            <div class="col-sm-6">
                                @*<input type="text" id="Name" placeholder="项目名称" value="@Model.CasesName" class="form-control" />*@
                                @Html.TextBoxFor(m => m.CasesName, new { @class = "form-control", @placeholder = "项目名称" })
                                @Html.ValidationMessageFor(m => m.CasesName, null, new { @class="help-inline"})
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">概述</label>
                            <div class="col-sm-6">
                                @*<textarea id="Abstract" class="form-control" rows="5">@Model.CasesAbstract</textarea>*@
                                @Html.TextAreaFor(m => m.CasesAbstract, new { @class = "form-control",@rows="5" })
                                @Html.ValidationMessageFor(m => m.CasesAbstract, null, new { @class="help-inline"})
                                <span class="help-block">
                                    (限制100字以内)
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="asterisk">*</span> 案例缩略图</label>
                            <div class="col-sm-6">
                                <div class="fileupload fileupload-new" data-provides="fileupload" id="container">
                                    <div class="input-append">
                                        <div class="uneditable-input">
                                            <i class="glyphicon glyphicon-file fileupload-exists"></i>
                                            <span id="filelist" class="fileupload-preview"></span>
                                        </div>
                                        <span class="btn btn-default btn-file">
                                            <span class="fileupload-new">上传缩略图</span>
                                            <span class="fileupload-exists">更改</span>
                                            @*<input id="pickfiles" value="@Model.CasesThumbnail" type="file" />*@
                                            @Html.TextBoxFor(m => m.CasesThumbnail, new { @id = "pickfiles", @type = "file" })
                                            @Html.ValidationMessageFor(m => m.CasesThumbnail, null, new { @class = "help-inline" })
                                        </span>
                                        <a href="#" id="uploadfiles" class="btn btn-default">上传</a>
                                        
                                    </div>
                                </div>
                                <input id="ImagePath" type="hidden" value="@Model.CasesThumbnail" />
                                <img id="PersonImage" src="@Html.IsNull(Model.CasesThumbnail, "../DigitalStyle/images/pic-none.png", Model.CasesThumbnail)" class="thumbnail img-responsive" alt="" />
                                
    @*<input id="ImagePath" type="hidden" value="@Model.CasesThumbnail" />
                    <div id="uploader"></div>
                    <img id="PersonImage" src="@Html.IsNull(Model.CasesThumbnail, "../DigitalStyle/images/pic-none.png", Model.CasesThumbnail)" class="thumbnail img-responsive" alt="" />*@
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="asterisk">*</span> 案例日期</label>
                            <div class="col-sm-4 ">
                                <div class="input-group">
                                    @*<input type="text" value="@Model.CasesDate" class="form-control" placeholder="mm/dd/yyyy" id="CasesDate">*@
                                    @Html.TextBoxFor(m => m.CasesDate, new { @class = "form-control", @placeholder = "mm/dd/yyyy" })
                                    @Html.ValidationMessageFor(m => m.CasesDate, null, new { @class="help-inline"})
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="asterisk">*</span> 所属分类</label>

                            <div class="col-sm-4 ">
                                <select id="CasesCategory" class="form-control chosen-select" data-placeholder="选择分类..." required></select>
                                @*<span class="help-inline"></span>*@                            
                                @*@Html.DropDownList("CasesCategory", ViewData["CasesCategory"] as List<BaseNameValueMode>, new { @class = "form-control chosen-select", @placeholder = "选择分类..." })*@
                                @Html.ValidationMessage("CasesCategory", new { @class = "help-inline" })
                                <a href="/Company/CompanyCasesClassManage" class="btn btn-default">添加分类</a>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">排序值</label>
                            <div class="col-sm-4">
                                @*<input type="text" id="OrderBy" placeholder="50" value="@Model.CasesOrderBy" class="form-control" />*@
                                @Html.TextBoxFor(m => m.CasesOrderBy, new { @placeholder = "50", @class = "form-control"})
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">标签</label>
                            <div class="col-sm-4">
                                @*<input name="tags" id="Labels" class="form-control" value="@Model.CasesLabels" />*@
                                @Html.TextBoxFor(m => m.CasesLabels, new { @class = "form-control"})
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="checkbox">详细描述</label>
                            <div class="col-sm-6">
                                @*<textarea id="CasesDetails" name="CasesDetails" placeholder="请在此输入主题内容" class="form-control" rows="10">@Model.CasesDetails</textarea>*@
                                @Html.TextAreaFor(m => m.CasesDetails, new { @class = "form-control", @rows = "10", @placeholder = "请在此输入主题内容" })
                                @Html.ValidationMessageFor(m => m.CasesDetails, null, new { @class="help-inline"})
                                <span class="help-block">
                                    (限制500字以内)
                                </span>
                            </div>
                        </div>

                        <div class="panel-footer">
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-3">
                                    <button class="btn btn-primary" onclick="javascript:Save();">提交</button>&nbsp;
                                    <button class="btn btn-default">取消</button>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>

            </div><!-- panel -->
        </div>

    </div>
</div>

<script>
    function callback(msg)
    {
        $("#ImagePath").val(msg.msg.url);
        $("#PersonImage")[0].src = msg.msg.url;
    }
    jQuery(document).ready(function () {
        $('#uploader').FileUpload({

            'subfolder': 'UserInfo' + '@Digital.Common.CryptoService.MD5Encrypt(User.Identity.GetUserId(),Digital.Common.SerurityType.UserInfoFolder)',
            'ImageId': ''

        });
        var CasesCategoryjsons=@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject((List<BaseNameValueMode>)ViewBag.CasesCategory))
        DropOption(CasesCategoryjsons,$("#CasesCategory"),@Model.CasesCategoryID);

        // Chosen Select
        jQuery(".chosen-select").chosen({ 'width': '100%', 'white-space': 'nowrap' });

        // Tags Input
        jQuery('#Labels').tagsInput({ width: 'auto' });

        // Textarea Autogrow
        jQuery('#CasesDetails').autogrow();

        // Date Picker
        jQuery('#CasesDate').datepicker();

        jQuery('#CasesDate-inline').datepicker();

        jQuery('#CasesDate-multiple').datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
        });

        // Input Masks
        jQuery("#date").mask("99/99/9999");
        jQuery("#phone").mask("(999) 999-9999");
        jQuery("#ssn").mask("999-99-9999");


        // CKEditor
        jQuery('textarea#CasesDetails').ckeditor();
        jQuery('#inlineedit1, #inlineedit2').ckeditor();

        


        // With Form Validation Wizard
        var $validator = jQuery("#firstForm").validate({
            rules:{
                CasesName:{
                    required:true,
                    isContainsSpecialChar:true
                },
                CasesThumbnail:{
                    required:true
                },
                CasesDate:{
                    required:true,
                },
                CasesCategory:{
                    required:"#CasesCategory option:selected",
                },
                CasesAbstract:{
                    stringContentCheck:[1,200]
                },
                CasesDetails:{
                    stringContentCheck:[1,1000]
                }
            },
            messages:{
                CasesName:{
                    required:"请输入案例名称",
                    isContainsSpecialChar:"含有中英文特殊字符"
                },
                CasesThumbnail:{
                    required:"请选择案例缩略图"
                },
                CasesDate:{
                    required:"请选择案例日期",
                },
                CasesCategory:{
                    required:"请选择案例分类",
                   
                },
                CasesAbstract:{
                    stringContentCheck:$.validator.format("请确保内容输入{0}-{1}字节以内")
                },
                CasesDetails:{
                    stringContentCheck:$.validator.format("请确保内容输入{0}-{1}字节以内")
                }
            },
            highlight: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-error');
            },
            focusInvalid: false,
            onkeyup: false,
            ignore:'',
            errorPlacement: function (error, element) {
                error.insertAfter($(element).parent().children().last());
            }
        });

        CKEDITOR.instances["CasesDetails"].on("instanceReady", function()   
        {   
            //set keyup event   
            this.document.on("keyup", updateTextArea);   
            //and paste event   
            this.document.on("paste", updateTextArea);   
  
        });

    });

    function updateTextArea()   
    {   
        CKEDITOR.tools.setTimeout( function()   
        {    
            $("#CasesDetails").val(CKEDITOR.instances[$("#CasesDetails").attr("id")].getData());   
            $("#CasesDetails").trigger('keyup');  
            $("#CasesDetails").trigger('paste');
        }, 0);     
    }  

    function Save()
    {
        //var Abstract = $.jsparams.textarea("CasesAbstract");
        //alert(Abstract.gblen());

        //var CasesDetails=$.jsparams.textarea("CasesDetails");
        //alert(CasesDetails.gblen());

        var $valid = jQuery('#firstForm').valid(); 
        //debugger;
        if (!$valid)
        {
            return false;
        }
        else
        {
            var Name = $.jsparams.input("CasesName");
            var Abstract = $.jsparams.textarea("CasesAbstract");
            var Image = $.jsparams.input("ImagePath");
            var CasesDate = $.jsparams.input("CasesDate");
            var CasesCategory=$.jsparams.select("CasesCategory");
            var OrderBy= $.jsparams.input("CasesOrderBy");
            var Labels=$.jsparams.input("CasesLabels");
            var CasesDetails=$.jsparams.textarea("CasesDetails");
            @{
            var Ids = Request["Id"] == null ? "0" : Request["Id"].ToString();
        }
            var Id=@Ids;
            ComAjax("/Company/CompanyCasesAdd", {Id:Id, CName: Name, Abstract: Abstract, CImage: Image, CasesDate: CasesDate, CasesCategory: CasesCategory,OrderBy:OrderBy,Labels:Labels,CasesDetails:CasesDetails }, "添加案例");
        }
    }
</script>


